웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 난수, 랜덤 숫자 만들기 예제

Last Modified : 2017-12-12 / Created : 2016-05-30
38,254
View Count

자바스크립트를 사용하여 무의미한 랜덤한 숫자인 난수를 발생시키는 방법을 알아보고자 합니다. 먼저 난수(random number)는 왜 필요할까요? 난수는 다양한 곳에 활용할 수 있습니다. 그 경우는 굉장히 많으며 아래에서 자세히 알아보겠습니다.



# 난수의 생성 언제 필요한가?

난수는 언제 필요할까요? 먼저 파일이름을 임의로 생성할 경우를 예로들겠습니다. 난수를 생성하여 파일이름에 추가할 경우 저장된 파일명의 중복을 피할 수 있습니다. 만약 하나의 폴더에 수 많은 이미지가 담겨 있다고 합시다. 시간이 지날수록 같은 이름을 가진 이미지가 저장될 확율이 높아지겠죠? 이를 피하기 위해서도 이미지 이름 앞에 난수를 더하는 방법이 사용됩니다.

그것 외에도 불특정한 이미지 또는 배너를 순서없이 랜덤하게 보여주기 위해서도 사용이 가능합니다. 예를 들어 A, B, C 세가지 배너 광고를 랜덤하게 보여줄 경우에 무작위로 선택하여 보여줄 수 있을 것입니다? 그럼 어떻게 해서 난수생성이 가능한지 함수를 만들어 보겠습니다.아래는 난수 생성을 하는 함수입니다.


# 자바스크립트 난수생성 예제소스 보기

아래는 난수를 만드는 간단한 예제입니다.
var generateRandom = function (min, max) {
  var ranNum = Math.floor(Math.random()*(max-min+1)) + min;
  return ranNum;
}

위 코드는 매우 간단한 방법으로 난수를 만드는 함수입니다. 함수 generateRandom()는 입력된 값의 범위에서 임의로 난수를 생성합니다. 그럼 0에서 100 사이의 난수는 어떻게 만들 수 있을까요?


! 0 부터 100 사이의 난수 만들기 예제

즉 0에서 100 사이의 난수를 만들 경우라면 다음과 같이 생성이 가능합니다.
generateRandom(0, 100);

여기서 사용한 함수는 Math.random()으로 이 함수는 0.000000... ~ 0.999999....의 랜덤한 실수를 반환해줍니다. 그리고 함께 있는 Math.floor()는 소수점 이하를 버림으로 하여 반환해줍니다. 그래서 1부터 100까지 정수값을 가지는 난수(랜덤값)를 불러오게되죠.


! 100부터 200 사이의 난수 만들기 예제

그럼 100에서 200까지의 난수를 구하려면 어떻게 할까요? 위 예제와 거의 같으나 최소값은 100이고 최대값은 200이 되겠죠?
generateRandom(100, 200);

위와 같이 입력하면 최초값 100부터 최대값 200까지의 랜덤한 값을 얻을 수 있게됩니다.


슬롯머신 역시 난수의 생성으로 승자가...

# 난수의 생성, 언제 많이 사용되나

난수의 생성은 위에도 언급했지만 그 쓰임이 많습니다. 아래의 경우에 많이 사용됩니다.

- 배너 광고 또는 갤러리의 이미지를 불특정한 순서, 즉 랜덤하게 보여줄 경우

- 특정 이벤트 및 상품 홍보시 이를 랜덤하게 보여줄 경우

- 이미지 및 파일 저장시 중복되는 것을 피하기 위해

- 무작위로 움직이는 대상을 프로그래밍하는 경우


위 이유들 말고도 난수를 만드는 함수는 쓰이는 곳이 매우 많은 중요한 함수 중 하나입니다. 카지노 슬롯머신의 경우도 다르지 않습니다. 슬롯머신 역시 이런 난수를 사용해 게임의 승자가 랜덤하게 정하게됩니다. 하지만 난수가 진정한 난수가 되기 위해서는 어떠한 경우에도 예측할 수 없어야하므로 난수 생성의 방법은 점점 더 복잡한 방법이 사용되고 있습니다.


# 마치면서

임의의 수를 전혀 예측할 수 없게 만들 수 있을까요? 난수 생성은 백잡한 계산으로 만들어지고 어떤 난수이든 똑같이 만들어 내는 것이 얼마니 어려운가의 문제이지 불가능한 것은 아니기 때문입니다... 나중에는 전혀 예측할 수 없는 난수가 나올 수도 있을 것입니다. 생체 신호 또는 DNA 등을 사용한 난수 생성이 가능할지도 모르겠습니다.

Previous

[HTML] select 태그(박스) 사용방법

Previous

[자바스크립트] switch 조건문 사용방법